<template>
  <div class="box">
    <div ref="main" id="main" style="height:500px;width:500px"></div>
  </div>
</template>
<script>
import request from '@/untils/request'
export default {
  data() {
    return {
      myChart: [],
      option: {},
      surface: []
    }
  },
  methods: {
    async initChart() {
      const id = localStorage.getItem('id')
      Number(id)
      const { data: res } = await request.get(`/bill/totalAmount/${Number(id)}`)
      this.surface = res.data
      this.myChart = this.$echarts.init(this.$refs.main)

      this.option = {
        title: {
          text: '财务报表',
          subtext: '月/总收入',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '具体收入',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.surface.amounts, name: '总收入' },
              { value: this.surface.amount, name: '近月收入' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.option && this.myChart.setOption(this.option)
    }
  },
  mounted() {
    this.initChart()
  },
  components: {}
}
</script>
<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
}
#main {

}
</style>
